<template>
    <div class="container">
        <div
            class="three-box"
            id="three-box"
            style="width:800px;height:800px"
        ></div>
    </div>
</template>

<script>
import * as myThree from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
export default {
    data() {
        return {};
    },
    mounted() {
        let scene, camera, renderer;
        scene = new myThree.Scene();
        camera = new myThree.PerspectiveCamera(
            75,
            // window.innerWidth / window.innerHeight,
            1,
            0.1,
            1000
        );
        renderer = new myThree.WebGLRenderer({
            antialias: true
        });
        const axesHelper = new myThree.AxesHelper(5);
        scene.add(axesHelper);
        // renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setSize(800, 800);
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.autoRotate = true;
        controls.update();
        document.querySelector(".three-box").append(renderer.domElement);
        this.CreateCube(scene, camera, renderer);
        this.UpdateThree(scene, camera, renderer, controls);
        // this.CreateGui();
    },
    methods: {
        CreateCube(scene, camera, renderer) {
            const geometry = new myThree.BoxGeometry(1, 1, 1);
            let colorArr = [
                "green",
                "red",
                "blue",
                "orange",
                "skyblue",
                "gray"
            ];
            let materialArr = colorArr.map(
                color => new myThree.MeshBasicMaterial({ color: color })
            );
            // const material = new myThree.MeshBasicMaterial({ color: 0x00ff00 });
            const cube = new myThree.Mesh(geometry, materialArr);
            scene.add(cube);
            camera.position.z = 5;
        },
        CreateGui() {
            const gui = new dat.GUI();
            gui.add(document, "title");
        },
        BoxResize(renderer, camera) {
            renderer.setSize(800, 800);
            camera.aspect = 1;
            camera.updateProjectionMatrix();
        },
        UpdateThree(scene, camera, renderer, controls) {
            requestAnimationFrame(() => {
                this.UpdateThree(scene, camera, renderer, controls);
                if (true) {
                    controls.update();
                    renderer.render(scene, camera);
                }
            });
        }
    }
};
</script>

<style lang="less">
.container {
    width: 100%;
    height: calc(100% - 90px);
    background-color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    .three-box {
        background-color: pink;
    }
}
</style>
